<template>
<div id="LegworkVehicle" style=" margin:0 auto;">
			<div style="background-color: rgb(247,247,247); height:60px;line-height: 60px; text-align: center;">
				<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">车牌号:</span>&nbsp;
				<el-input placeholder="车牌号" v-model="Arvehicle.arlicense" style="width:120px;"></el-input>&nbsp;
				<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">车型:</span>&nbsp;
				<template>
					<el-select style="width: 150px;" v-model="Arvehicle.vtypeid" placeholder="请选择">
						<el-option v-for="item in vehicleType" :key="item.vtypeid" :label="item.vtypename" :value="item.vtypeid">
						</el-option>
					</el-select>
				</template>

				<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">当前里程:</span>&nbsp;
				<el-input placeholder="当前里程" v-model="Arvehicle.arvehiclekm" style="width:120px;"></el-input>&nbsp;
				<span style="color: red;">*</span>
				<span style="font-size: 18px;">所属班组:</span>&nbsp;
				<template>
					<el-select style="width: 120px;" v-model="Arvehicle.artisansid" placeholder="请选择">
						<el-option v-for="item in shift" :key="item.artisansid" :label="item.artisansname" :value="item.artisansid">
						</el-option>
					</el-select>
				</template>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<el-button type="primary" style="line-height: 15px;" @click="addArvehicle()">保存</el-button>
			</div>
			<!--table表格-->
			<template>
				<el-table ref="singleTable" :data="Arvehicles" highlight-current-row @current-change="handleCurrentChange" border>
					<el-table-column property="arvehicleid" label="编号">
					</el-table-column>
					<el-table-column property="arlicense" label="车牌">
					</el-table-column>
					<el-table-column property="vtypename" label="车型">
					</el-table-column>
					<el-table-column property="arvehiclekm" label="公里数">
					</el-table-column>
					<el-table-column property="artisansname" label="所属班组">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="temp">
							<el-button type="primary" @click="amendLegworkCar=true,amendButton(temp.row)" icon="el-icon-edit" circle></el-button>
							<el-button type="danger" @click="removeArvehicle(temp.row.arvehicleid)" icon="el-icon-delete" circle></el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
			<!--修改-->
			<el-dialog title="修改外勤车辆" :visible.sync="amendLegworkCar" width="60%" :before-close="handleCloses">
				<div style="margin: 0 auto; line-height: 60px; text-align: center;">
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">车牌号:</span>&nbsp;
					<el-input placeholder="车牌号" v-model="newArvehicle.arlicense" style="width:120px;"></el-input>&nbsp;&nbsp;
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">车型:</span>&nbsp;&nbsp;&nbsp;
					<template>
						<el-select style="width: 150px;" v-model="newArvehicle.vtypeid" placeholder="请选择">
							<el-option v-for="item in vehicleType" :key="item.vtypeid" :label="item.vtypename" :value="item.vtypeid">
							</el-option>
						</el-select>
					</template>
					<span style="color: red;">*</span>&nbsp;<span style="font-size: 18px;">当前里程:</span>&nbsp;
					<el-input placeholder="当前里程" v-model="newArvehicle.arvehiclekm" style="width:120px;"></el-input>&nbsp;
					<span style="color: red;">*</span>
					<span style="font-size: 18px;">所在班组:</span>&nbsp;
					<template>
						<el-select style="width: 120px;" v-model="newArvehicle.artisansid" placeholder="请选择">
							<el-option v-for="item in shift" :key="item.artisansid" :label="item.artisansname" :value="item.artisansid">
							</el-option>
						</el-select>
					</template>
				</div>
				<span slot="footer" class="dialog-footer">
			    <el-button @click="amendLegworkCar = false,queryArvehicle()">取 消</el-button>
			    <el-button type="primary"  @click="amendLegworkCar = false,amendArvehicle()">确 定</el-button>
			    </span>
			</el-dialog>
		</div>
</template>

<script>
export default {
data() {
//这里存放数据
return {
    shift: [],
    vehicleType: [],
    /*外勤车辆对象*/
    Arvehicle: {},
    /*外勤车辆集合*/
    Arvehicles: [],
    /*修改外勤车辆弹出框属性*/
    amendLegworkCar: false,
    newArvehicle:{}
};
},
//计算属性
computed: {},
//方法集合
methods: {
	/*查询班组*/
    queryGroup() {
        let _this = this;
        _this.$http.get(`http://localhost:8080/api/ArtisansAction/queryShift`).then(function (resp){
            _this.shift = resp.data;
        });
    },
    /*查询车辆型号*/
    queryVehicleType() {
        let _this = this;
       _this.$http.get(`http://localhost:8080/api/ArtisansAction/queryVehicleType`).then(function (resp){
            _this.vehicleType = resp.data;
        });
    },
    /*保存方法*/
    addArvehicle() {
        let _this = this;
        if(this.Arvehicle.arlicense==null){
             _this.$message.error('错了哦，请输入车牌号!!');
            return;
        }
        if(this.Arvehicle.vtypeid==null){
              _this.$message.error('错了哦，请选择车型!!');
              return;
        }
        if(this.Arvehicle.arvehiclekm==null){
              _this.$message.error('错了哦，请输入当前里程!!');
              return;
        }
        if(this.Arvehicle.artisansid==null){
              _this.$message.error('错了哦，请选择所属班组!!');
              return;
        }


       
       _this.$http.post("http://localhost:8080/api/ArtisansAction/addArvehicle", this.Arvehicle).then(function (resp){
            if(resp.data.code == "200") {
                _this.$message({
                    message: '恭喜你，新增成功!!',
                    type: 'success'
                });
                _this.Arvehicle={};
                _this.queryArvehicle();
            } else {
                _this.$message.error('错了哦，新增失败!!');
                _this.queryArvehicle();
            }

        });
    },
    /*查询外勤车辆*/
    queryArvehicle() {
        let _this = this;
       _this.$http.get(`http://localhost:8080/api/ArtisansAction/queryArvehicle`).then(function (resp){
            _this.Arvehicles = resp.data;
        });

    },
    /*移除外勤车辆*/
    removeArvehicle(id) {
        let _this = this;
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
           _this.$http.delete(`http://localhost:8080/api/ArtisansAction/removeArvehicle/${id}`).then(function (resp){
                if(resp.data.code == "200") {
                    _this.$message({
                        message: '恭喜你，删除成功!!',
                        type: 'success'
                    });
                    _this.queryArvehicle();
                } else {
                    _this.$message.error('错了哦，删除失败!!');
                }
            });
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
        });

    },
    /*修改按钮*/
    amendButton(obj){
        let _this=this;
        _this.newArvehicle=obj;
        
    },
    /*修改确定按钮*/
    amendArvehicle(){
        let _this=this;
        _this.$http.put("http://localhost:8080/api/ArtisansAction/amendArvehicle",this.newArvehicle).then(function (resp){
            if(resp.data.code="200"){
                _this.$message({
                        message: '恭喜你，修改成功!!',
                        type: 'success'
                    });
                    
                    _this.queryArvehicle();
            }else{
                _this.$message.error('错了哦，修改失败!!');
            }
        });
    },

    /*表格选中*/
    handleCurrentChange(val) {
        this.currentRow = val;
    },
    /*新增成员弹出框取消关闭方法*/
    handleCloses(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
                    this.queryArvehicle();
                done();
            }).catch(_ => {});
    }
},
//挂载完成（可以访问DOM元素）
mounted() {
    this.queryVehicleType();
    this.queryGroup();
    this.queryArvehicle();
},
//监控data中的数据变化
watch: {

}
}
</script>
<style  scoped>
/*@import url(); 引入公共css类*/

</style>